<template>
	<view class="progress" :style="{width: `${size}rpx`,height: `${size}rpx` }">
		<view class="progress-left">
			<!-- 左进度条（50%~100%） -->
			<view class="main main-left" :style="{
					border: `${border}rpx solid #e7e7e7`,
					borderRightColor : color,
					borderTopColor : color,
					transform: `rotate(${target1 > 50 ? ((target1 - 50) * 3.6 + 45) - differences + 'deg' : '45deg'})`,
					transition: `all ${ ((target1 - 50) * 3.6 ) / 180 * 0.5 }s linear ${(target1 > 50 ? 1 : (target1 * 3.6 ) / 180) * 0.5}s`,
				}">
			</view>
		</view>

		<view class="progress-right">
			<!-- 右进度条（0%~50%） -->
			<view class="main main-right" :style="{
					border: `${border}rpx solid #e7e7e7`,
					borderBottomColor : color,
					borderLeftColor : color,
					transform: `rotate(${target1 > 50 ? '225deg' : (target1 * 3.6 + 45) - differences + 'deg'})`,
					transition: `all ${ (target1 > 50 ? 1 : (target1 * 3.6 ) / 180) * 0.5 }s linear`,
				}">
			</view>
		</view>

		<!-- 进度条末端圆圈 -->
		<view class="r-e r-e-end" v-if="circular && target1 !== 100" :style="{
				width: `${border}rpx`,
				left: `calc(50% - ${border / 2}rpx)`,
				transform: `rotate(${target1 * 3.6  - differences }deg)`,
				transition: `all ${(target1 > 50 ? 1 + ((target1 - 50) * 3.6 / 180) : (target1 * 3.6 ) / 180) * 0.5 }s linear`,
			}">
			<view class="" :style="{
					height: `${border}rpx`}">
				<view class="" :style="{
					height: `${border}rpx`, 
					background: color, 
					borderRadius: '50%',
					}">
				</view>
			</view>
		</view>
		<!-- 进度条始端圆圈 -->
		<view class="r-e" v-if="circular && target1 !== 100" :style="{
				width: `${border}rpx`,
				left: `calc(50% - ${border / 2}rpx)`,
				transform: `rotate(${  (180 * (border / 2)) / size / 2.4 }deg)`
			}">
			<view class="" :style="{
					height: `${border}rpx`,
				}">
				<view class="" :style="{
					height: `${border}rpx`, 
					borderRadius: '50%',
					background: color,
					}"></view>
			</view>
		</view>

		<!-- 文字 -->
		<view class="progress-text">
			<slot>
				<view>{{ title }}</view>
				<view>{{ target }}%</view>

			</slot>
		</view>
	</view>
</template>

<!-- #ifdef VUE2 -->
<script>
	export default {
		props: {
			// 大小
			size: {
				type: String || Number,
				default: 200
			},
			// 进度
			target: {
				type: Number,
				default: 0
			},
			// 进度条颜色
			color: {
				type: String,
				default: "red"
			},
			// 宽度
			border: {
				type: Number || Number,
				default: 8
			},
			// 中间文字
			title: {
				type: String || Number
			},
			// 是否圆角
			circular: {
				type: Boolean,
				default: true
			},
			// 是否有动画
			hasTransition: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				target1: 0,
				differences: 0,
			}
		},
		onShow() {
			console.log('prop', this.props);
		},
		mounted() {
			// onMounted(() => {

			// })
			if (this.hasTransition) {
				setTimeout(() => {
					this.target1 = this.target;
				});
			} else {
				this.target1 = this.target;
			}
		}
	}
</script>
<!-- #endif -->


<!-- #ifdef VUE3 -->
<script lang="ts" setup>
	// import { computed, onMounted, ref } from "vue";
	// const props = defineProps({
	// 	size: {  // 大小
	// 		type: String || Number,
	// 		default: 200
	// 	}, target: { // 进度
	// 		type: Number,
	// 		default: 0
	// 	}, color: { // 进度条颜色
	// 		type: String,
	// 		default: "red"
	// 	}, border: {// 宽度
	// 		type: Number,
	// 		default: 8
	// 	}, title: {// 中间文字
	// 		type: String || Number
	// 	}, circular: {  // 是否圆角
	// 		type: Boolean,
	// 		default: true
	// 	}, hasTransition: {// 是否有动画
	// 		type: Boolean,
	// 		default: false
	// 	}
	// });
	// let target1 = ref<number>(0);

	// let differences = computed(() => {
	// 	let diff : number = (180 * (props.border / 2)) / (parseInt(props.size + ''));
	// 	console.log(diff)
	// 	if (target1.value - diff < 0) {
	// 		return 0;
	// 	}
	// 	// return diff;
	// 	return 0;
	// });

	// onMounted(() => {
	// 	if (props.hasTransition) {
	// 		setTimeout(() => {
	// 			target1.value = props.target;
	// 		});
	// 	} else {
	// 		target1.value = props.target;
	// 	}
	// })
</script>
<!-- #endif -->

<style lang="scss" scoped>
	.progress {
		position: relative;
		display: flex;
		width: 200rpx;
		height: 200rpx;
		// outline: 2rpx solid red;
	}

	.progress .progress-left {
		width: 50%;
		height: 100%;
		overflow: hidden;
		position: relative;
	}

	.progress .progress-left .main-left {
		border-radius: 50%;
		box-sizing: border-box;
		width: 200%;
		height: 100%;
		border: 8rpx solid;
		border-top-color: red;
		border-right-color: red;
		transform: rotate(45deg);
	}

	.progress .r-e {
		// outline: 1px solid red;
		height: 100%;
		position: absolute;
		top: 0;
		left: 50%;
	}

	.progress .r-e-end {
		transform: rotate();
	}

	.progress .r-e>view {
		width: 100%;
		// border-radius: 50%;
		// outline: 1px solid red;

	}

	.progress .progress-right {
		width: 50%;
		height: 100%;
		overflow: hidden;
		position: relative;
	}

	.progress .progress-right .main-right {
		position: absolute;
		right: 0;
		top: 0;
		border-radius: 50%;
		box-sizing: border-box;
		width: 200%;
		height: 100%;
		border: 8rpx solid;
		// border-top-color: #e7e7e7;
		// border-right-color: #e7e7e7;
		border-bottom-color: red;
		border-left-color: red;
		transform: rotate(45deg);
	}

	.progress .progress-text {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-flow: column;
		align-items: center;
		justify-content: center;
	}
</style>